<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'导航栏'" style="width:220px;"
		<div class="easyui-accordion" data-options="fit:true,border:false">
			<div title="Title1" style="padding:10px;">
				content1
			</div>
			<div title="Title2" data-options="selected:true" style="padding:10px;">
				<a href="javascript:void(0)" onclick="clickNav('淘宝','http://taobao.com')">淘宝</a>
				<a href="javascript:void(0)" onclick="clickNav('天猫','http://www.tmall.com')">天猫</a>
				<a href="#" onclick="clickNav('商品列表','goods/rowediting.html')">商品列表</a>
			</div>
			<div title="Title3" style="padding:10px">
				content3
			</div>
		</div>
	</div>

	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'">
		<div class="easyui-tabs" style="width:100%;height:100%" id="tabs">
			<div title="About" style="padding:10px">
				<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
				
			</div>
			<div title="My Documents" style="padding:10px">
				<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
			</div>
			<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
				This is the help content.
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function clickNav(title,url){
			if($('#tabs').tabs('exists',title)){
				$('#tabs').tabs('select',title);
			}else{
				var content='<iframe src="'+url+'"frameborder="0" scrolling="auto" style="height:100%;width:100%"></iframe>';
				$('#tabs').tabs('add',{
					title:title,
					//href:url,
					content:content,
					closable:true,
				});
			}
		}
	</script>
</body>
</html>